<script type="module" setup>
    import {ref} from "vue"

    // export default {
    //     setup() {
            // 计数器
            let counter = ref(0);

            function counterIncrease() {
                ++counter.value;
            }
            function counterDecrease() {
                --counter.value;
            }

            let msg = "这里是message";

            let age = 10;

            let msg2 = "<h1>这里是html文本</h1>"

            // return {
            //     counter,
            //     counterIncrease,
            //     counterDecrease
            // }
    //     }
    // }
</script>

<template>
	<div>
		<button @click="counterDecrease()">-</button>
        <span>&nbsp; {{ counter }} &nbsp;</span>
        <button @click="counterIncrease()">+</button> <br>
        <span v-text="`1 ${msg} 2`"></span> <br>
        <span v-text="age > 10 ? '大于10' : '小于等于10'"></span> <br>
        <span v-text="msg2"></span> <br>
        <span v-html="msg2"></span> <br>
        <font color="red">这里是font标签</font>
	</div>
</template>

<style scoped>

</style>
